<template>
    <view class="bg-img" :class="bgClass" :style="bgStyle">
        <slot></slot>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { addUnit } from '@/utils/common'

const props = defineProps({
    // 背景图片
    url: {
        type: String,
        required: true,
    },

    height: {
        type: [String, Number],
        default: '300rpx',
    },

    // 是否显示遮罩层
    mask: {
        type: Boolean,
        default: false,
    },
	
	// 圆角
	rounded :{
		type:String,
		default : ''
	}
})

const bgStyle = computed(() => {
    return {
        backgroundImage: `url(${props.url})`,
        height: addUnit(props.height),
    }
})

const bgClass = computed(() => {
	const baseClasses = [
		{
		    'bg-mask': props.mask,
		},
		props.rounded ? props.rounded : ''
	];
    return baseClasses
})
</script>

<style lang="scss" scoped>
.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-mask {
    background-color: #333333;
    position: relative;
    &::after {
        content: '';
        border-radius: inherit;
        width: 100%;
        height: 100%;
        display: block;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
}
</style>
